<template>
  <!-- 行 -->
  <el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="height: 40px; width: 100%"
  >
    <!-- 列 -->
    <el-col :span="20">
      <!-- 代表是否是 根，有根就显示，没根就不显示 -->
      <i v-if="root" class="el-icon-s-cooperation title" />
      <span>{{ nodeDate.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <el-col class="box">{{ nodeDate.manager }}</el-col>
        <el-col class="box">
          <!-- 下拉菜单  绑定了@command事件  点击菜单项触发的事件回调 -->
          <el-dropdown @command="commandFn">
            <!-- 标题 -->
            <span class="el-dropdown-link" @click.stop>
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <!-- 下拉的内容 -->
            <template #dropdown>
              <el-dropdown-menu>
                <!-- 为了方便知道触发的是那一个，给不同的菜单设置不同的属性，点击菜单会触发 el-dropdown的command事件 -->
                <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                <el-dropdown-item v-if="!root" command="edit">查看部门</el-dropdown-item>
                <el-dropdown-item v-if="!root" command="del">删除部门</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepartment } from '@/api/departments'
export default {
  props: {
    nodeDate: {
      type: Object,
      required: true
    },
    // 如果有root传递就是true，没有就是false
    root: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    commandFn(command) {
      switch (command) {
        case 'add':
          this.add()
          break
        case 'edit':
          this.edit()
          break
        case 'del':
          this.del()
          break
      }
    },
    add() {
      // 显示添加弹窗,并且把当前项传给父组件，父组件再传给AddDept
      this.$emit('add', this.nodeDate)
    },
    edit() {
      // 显示编辑弹窗,并且把当前项传给父组件，父组件再传给AddDept
      this.$emit('edit', this.nodeDate)
    },
    async del() {
      // 是一个promise，点确定往下走，点取消会报错，走catch
      try {
        await this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          type: 'warning'
        })
      } catch {
        return
      }
      // 点了确定,发请求删除
      await delDepartment(this.nodeDate.id)
      this.$message.success('删除部门成功')
      // 在子组件删除，父组件没反应，要提示父组件,重新渲染数据
      this.$emit('getDepartments')
    }
  }
}
</script>

<style lang='scss' scoped>
.box {
  width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}
.title{
  font-size: 30px;
}
</style>
